<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="css/mui.min.css" rel="stylesheet" />
	<style>
		.confirm-pay .mui-table-view {
			background-color: white;
		}

		.confirm-pay .mui-table-view-cell {
			padding: 0;
			background-color: white;
		}

		.confirm-title {
			font-family: '楷体';
			font-weight: bold;
			width: 100%;
			height: 50px;
			color: #0062CC;
			font-size: 20px;
			text-align: center;
			line-height: 50px;
			border-bottom: 1px silver solid;
		}
	</style>
</head>

<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-pull-left"></a>
		<h1 class="mui-title">交易信息</h1>
		<span class="mui-icon mui-icon-close mui-pull-right" onclick="window.history.go(-2);"></span>
	</header>
	<div class="mui-content">
		<!--添加卡-->
		<div class="add-card" id="add-card" style="display: none;">
			<div class="mui-card">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>订单金额</label>
						<input id="money" type="text" class="mui-input-clear" placeholder="开户银行" data-input-clear="5" value="5￥" style="color: red;"
						    disabled="false"><span class="mui-icon mui-icon-pulldown"></span>
					</div>
					<div class="mui-input-row">
						<label>开户银行</label>
						<select id="bankList">
								<option>请选择银行卡</option>
							</select>
					</div>
					<div class="mui-input-row">
						<label>银行卡号</label>
						<input id="cardId" type="text" class="mui-input-clear" placeholder="银行卡号" data-input-clear="5"><span class="mui-icon mui-icon-clear mui-hidden"></span>
					</div>
					<div class="mui-input-row">
						<label>持卡人姓名</label>
						<input id="name" type="text" class="mui-input-clear" placeholder="持卡人姓名" data-input-clear="5" disabled><span class="mui-icon mui-icon-clear mui-hidden"></span>
					</div>
					<div class="mui-input-row">
						<label>有效期</label>
						<input id="expire" type="text" class="mui-input-clear" placeholder="格式为月/年,如:0521" data-input-clear="5"><span class="mui-icon mui-icon-clear mui-hidden"></span>
					</div>
					<div class="mui-input-row">
						<label>CVV2</label>
						<input id="cvv2" type="text" class="mui-input-clear" placeholder="卡背后签名栏后三位" data-input-clear="5"><span class="mui-icon mui-icon-clear mui-hidden"></span>
					</div>
					<div class="mui-input-row">
						<label>预留手机号</label>
						<input id="tel" type="text" class="mui-input-clear" placeholder="银行预留手机号" data-input-clear="5"><span class="mui-icon mui-icon-clear mui-hidden"></span>
					</div>
				</form>
			</div>
			<!--<button type="button" class="mui-btn mui-btn-block mui-btn-primary" style="margin: 10px 10px;">确认</button>-->
		</div>
		<div class="select-card" id="select-card" style="display: none;">
			<div class="mui-card">
				<div class="mui-input-group">
					<div class="mui-input-row">
						<label style="width: 100%;">绑卡快捷支付:</label>
					</div>
					<div class="mui-input-row mui-text-center add-new-card" style="margin-top: 10px; width: 100%;">
						<button style="border: none;" id="addBindCard">添加新银行卡</button>
					</div>
				</div>
			</div>
		</div>
		<!--<div class="mui-input-row mui-checkbox mui-left" style="font-size: 14px;">-->
		<!--<label>记住卡信息，下次可一键快捷支付</label>-->
		<!--<input name="checkbox" id="rememberCard" type="checkbox">-->
		<!--</div>-->
		<button type="button" data-loading-text="提交中" class="mui-btn mui-btn-primary confirm-btn" style="width: 90%;height:40px;font-size: 16px;margin-left: 5%;">确认信息</button>
	</div>

	<!--确认支付-->
	<div id="forward" class="mui-popover mui-popover-action mui-popover-bottom">
		<div style="width: 100%;height:254px;background-color: white;">
			<div class="confirm-title">
				确认支付
			</div>
			<div class="mui-input-group">
				<div class="mui-input-row">
					<label>支付金额</label>
					<input disabled type="text" id="amount" class="mui-input-clear" placeholder="" data-input-clear="5"><span class="mui-icon mui-icon-clear mui-hidden"></span>
				</div>
				<div class="mui-input-row">
					<label>订单编号</label>
					<input disabled type="text" id="order_no" class="mui-input-clear" placeholder="" data-input-clear="5"><span class="mui-icon mui-icon-clear mui-hidden"></span>
				</div>
				<div class="mui-input-row" id="bank_num_row">
					<label>支付卡号</label>
					<input disabled type="text" id="bank_num_li" class="mui-input-clear" placeholder="" data-input-clear="5"><span class="mui-icon mui-icon-clear mui-hidden"></span>
				</div>
				<div class="mui-input-row">
					<label>验证码</label>
					<input type="text" id="sms_code_input" class="mui-input-clear" placeholder="验证码" data-input-clear="5" style="width: 30%;float: left;">
					<span class="mui-icon mui-icon-clear mui-hidden"></span>
					<button data-loading-text=" " class="mui-btn code-btn" style="float: left;border: none;width: auto;" id="sms_code_btn">获取验证码</button>
				</div>
			</div>
			<div>
				<button data-loading-text="提交中" class="mui-btn mui-btn-danger" style="width: 100%;border-radius: 0;font-size: 16px;position: absolute;left: 0px;bottom: 0px;height: 44px;">确定支付</button>
			</div>
		</div>
	</div>
	<div id="from-hidden" style="display: none">

	</div>
	<script src="js/mui.min.js"></script>
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/validateutil.js"></script>
	<script src="js/hlbh5pay.js"></script>
	<script type="text/javascript">
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
		mui.ready(function () {
			mui.get("/thmlfApi/avs/pay/accessbanklist?gateway=" + gateway + "&_d=" + Date.parse(new Date()), null, function (r) {
				$("#bankList").find("option").remove();
				mui.each(r.result, function (index, item) {
					$("#bankList").append("<option value='" + item.bankCode + "'>" + item.bankName + "</option>");
				})
			}, 'json');
		});
	</script>
</body>

</html>